<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>验证码</title>
  <script src="js/jquery.min.js"></script>
  <style>
    #inputCaptcha {
      height: 30px;
      vertical-align: middle; 
    }
    #verificationCodeImg{
      vertical-align: middle; 
    }
    #checkCaptcha{
      height: 40px;
      width: 100px;
    }
  </style>
</head>

<body>
  <h1>输入验证码</h1>
  <div id="confirm">
    <input type="text" name="inputCaptcha" id="inputCaptcha">
    <img id="verificationCodeImg" src="/admin/captcha" style="cursor: pointer;" title="看不清？换一张" />
    <input type="button" value="提交" id="checkCaptcha">
  </div>

  <script>
    
    $("#verificationCodeImg").click(function(){
      //对src赋值,
      //dt=' + new Date().getTime(), 重新获取请求
      $(this).hide().attr('src', '/admin/captcha?dt=' + new Date().getTime()).fadeIn();
    });

    $("#checkCaptcha").click(function () {
      $.ajax({
        type: "get",
        url: "/admin/check",
        data: {
          captcha: $("#inputCaptcha").val()
        },
        contentType: "application/json",
        success: function (result) {
          console.log(result);
          if (result) {
            location.href = "success.html";

          } else {
            alert("验证码错误");
          }
        }
      });
    });

  </script>
</body>

</html>